<template>
  <div class="area-select">
    <span style="margin-right:4px">{{ label }}</span>
    <el-cascader
      v-model="text"
      :options="options"
      size="mini"
      :props="props"
      :style="{'width': `${width}px`}"
      @change="valueChange"
    />
  </div>
</template>

<script>
// import {
//   getAreaTree
// } from '@/utils/apis/children/detail'

export default {
  name: '',
  components: {},
  props: {
    label: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    value1: {
      type: String,
      default: ''
    },
    value2: {
      type: String,
      default: ''
    },
    disabled: {
      type: [Boolean, String],
      default: false
    },
    width: {
      type: String,
      default: '180'
    },
    justTwo: {
      type: [String, Boolean],
      default: false
    }
  },
  data() {
    return {
      text: [],
      options: [],
      props: {
        value: 'label'
      }
    }
  },
  created() {
    // this._getAreaTree()
    if (this.justTwo) {
      [this.value, this.value1, this.value2].filter(item => item).forEach((item, index) => {
        this.$set(this.text, index, item)
      })
    } else {
      [this.value, this.value1, this.value2].forEach((item, index) => {
        this.$set(this.text, index, item)
      })
    }
  },
  mounted() {},
  methods: {
    valueChange(val) {
      this.$emit('update:value', val[0])
      this.$emit('update:value1', val[1])
      if (this.value2) {
        this.$emit('update:value2', val[2])
      }
    }
    // async _getAreaTree() {
    //   try {
    //     const { data } = await getAreaTree()
    //     if (data.code === 200) {
    //       this.options = data.data
    //       if (this.justTwo) {
    //         this.options.forEach(item => {
    //           if (item.children) {
    //             item.children.forEach(child => {
    //               delete child.children
    //             })
    //           }
    //         })
    //       }
    //     } else {
    //       console.log(data)
    //     }
    //   } catch (e) {
    //     console.log(e)
    //   }
    // }
  }
}
</script>

<style lang="less" scoped>
.area-select{
  display: inline-flex;
  align-items: center;
}
</style>
